<template>
    <div class="LW_surePlan_div" v-if="myPlanList!==null">
        <div class="LW_surePlan_top" style="background: #059EDF 100%">
            <div class="LW_surePlan_top_ico_div" @click="$router.go(-1)">
                <a-icon type="arrow-left" class="LW_surePlan_top_ico" theme="outlined" />
            </div>
            <div class="LW_surePlan_top_menu">{{myPlanList.title}}</div>
            <div class="LW_surePlan_top_right" >
                <span @click="showModal_cancel()">取消</span>
                <a-modal title="工区取消 请选择取消原因:"  @ok="handleOk_cancel" cancelText="取消" okText="确定" v-model="visible_cancel">
                    <select  name="cancel_state" class="LW_jump_select" id="LW_cancel_select" v-model="cancelSelected" >
                        <option :value="cancel.name" v-for="cancel in cancelList">{{cancel.name}}</option>
                    </select>
                </a-modal>
            </div>
        </div>
        <div class="LW_surePlan_content">
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd">线名：</a-col>
                <a-col span="6" class="LW_surePlan_col_even">{{myPlanList.planDetail.线名}}</a-col>
                <a-col span="6" class="LW_surePlan_col_odd">行别：</a-col>
                <a-col span="6" class="LW_surePlan_col_even">{{myPlanList.planDetail.行别}}</a-col>
            </a-row>

            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd">点内点外：</a-col>
                <a-col span="6" class="LW_surePlan_col_even">{{myPlanList.planDetail.点内点外}}</a-col>
                <a-col span="6" class="LW_surePlan_col_odd">作业等级：</a-col>
                <a-col span="6" class="LW_surePlan_col_even">{{myPlanList.planDetail.作业等级}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd" >是否临时：</a-col>
                <a-col span="8" class="LW_surePlan_col_even">{{myPlanList.planDetail.计划来源}}</a-col>
                <a-col span="6" class="LW_surePlan_col_odd">计划状态：</a-col>
                <a-col span="4" class="LW_surePlan_col_even">{{myPlanList.planDetail.计划状态}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd">作业位置：</a-col>
                <a-col span="6" class="LW_surePlan_col_even">{{myPlanList.planDetail.作业位置}}</a-col>
                <a-col span="4" class="LW_surePlan_col_odd">车站：</a-col>
                <a-col span="8" class="LW_surePlan_col_even">{{myPlanList.planDetail.登记站}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <!--<a-col span="4" class="LW_surePlan_col_odd" >里程：</a-col>
                <a-col span="8" class="LW_surePlan_col_even" style="font-size: 4.5vw">{{myPlanList.planDetail.里程}}</a-col>-->
                <a-col span="6" class="LW_surePlan_col_odd" style="font-size: 4.5vw">作业日期：</a-col>
                <a-col span="8" class="LW_surePlan_col_even" style="font-size: 5vw">{{myPlanList.planDetail.作业日期}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd">计划号：</a-col>
                <a-col span="18" class="LW_surePlan_col_even">{{myPlanList.planDetail.作业号}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row" type="flex" justify="center" align="middle">
                <a-col span="6" class="LW_surePlan_col_odd">作业地点：</a-col>
                <a-col span="18" class="LW_surePlan_col_even" style="font-size: 5vw;line-height: 7vw">
                    {{myPlanList.planDetail.作业地点}}
                </a-col>
            </a-row>
            <a-row class="LW_surePlan_row" type="flex" justify="center" align="middle">
                <a-col span="6" class="LW_surePlan_col_odd">作业项目：</a-col>
                <a-col span="18" class="LW_surePlan_col_even" style="font-size: 5vw;line-height: 7vw">
                    {{myPlanList.planDetail.作业项目}}
                </a-col>
            </a-row>
            <a-row class="LW_surePlan_row" type="flex" justify="center" align="middle">
                <a-col span="5" class="LW_surePlan_col_odd" style="font-size: 4vw">计划时间：</a-col>
                <a-col span="19" class="LW_surePlan_col_even" style="font-size: 4.5vw;line-height: 7vw">
                    {{myPlanList.planDetail.作业日期}} {{myPlanList.planDetail.作业时段}}
                </a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="5" class="LW_surePlan_col_odd" >带班人：</a-col>
                <a-col span="19" class="LW_surePlan_col_even" >{{myPlanList.planDetail.带班人}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="7" class="LW_surePlan_col_odd" >驻站防护人：</a-col>
                <a-col span="17" class="LW_surePlan_col_even" >{{myPlanList.planDetail.驻站防护人}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="7" class="LW_surePlan_col_odd" >现场盯控人：</a-col>
                <a-col span="17" class="LW_surePlan_col_even" >{{myPlanList.planDetail.现场防护人}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd" >作业人数：</a-col>
                <a-col span="18" class="LW_surePlan_col_even" >{{myPlanList.planDetail.职工数}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row">
                <a-col span="6" class="LW_surePlan_col_odd" >配合单位：</a-col>
                <a-col span="18" class="LW_surePlan_col_even" >{{myPlanList.planDetail.配合单位}}</a-col>
            </a-row>
            <a-row class="LW_surePlan_row" style="margin:0 0 4vw 0" v-if="tabKey!=='3'">
                <a-col span="24" class="LW_surePlan_col_odd" style="text-align: center;" >
                    <a-button type="primary" style="width: 80vw;height: 14vw;margin:0 0 4vw 0;"  @click="sendStep()">计划确认</a-button>
                </a-col>

            </a-row>

        </div>

    </div>

</template>
<style>
    .LW_surePlan_div{
        width: 100vw;
    }
    .LW_surePlan_top{
        width: 100vw;
        height: 14vw;
    }
    .LW_surePlan_top_ico_div{
        float: left;
        width: 16vw;
        height:14vw;
        line-height: 13.75vw;
        margin: 0;
        padding: 0;
        font-size: 4vw;
        text-align: center;
    }
    .LW_surePlan_top_menu{
        width: 64vw;
        height: 14vw;
        line-height: 14vw;
        color: white;
        font-size: 6vw;
        text-align: center;
        generic-family:SourceHanSansSC-regular;
        float: left;
    }
    .LW_surePlan_top_right{
        width: 20vw;
        height: 14vw;
        line-height: 14vw;
        color: white;
        font-size: 5vw;
        text-align: center;
        generic-family:SourceHanSansSC-regular;
        float: right;
    }
    .LW_surePlan_top_ico{
        font-size: 7vw;
        color: white;
        margin: 3.5vw 0 0 0;

    }
    .LW_surePlan_content{
        width: 100vw;
        generic-family:Roboto;
        font-weight: normal;

    }
    .LW_surePlan_row{
        min-height: 14vw;
        width: 100vw;
        padding: 0 2vw 0 2vw;
    }
    .LW_surePlan_col_odd{
        color: gray;
        font-size: 4.5vw;
        text-align: left;
        line-height: 12vw;
        font-weight:normal;
        generic-family: Microsoft Yahei ;
    }
    .LW_surePlan_col_even{
        color: deepskyblue;
        font-size: 5vw;
        text-align: left;
        line-height: 12vw;
        word-break: break-all;
    }
</style>
<script>

    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import axios from "axios"
    export default {
        name: "LineWorkSurePlan",
        components:{ACol, ARow},
        created(){
            this.cancelSelected = this.cancelList[0].name;
        },
        mounted() {
            visible_cancel:false,
            this.getPlanById();
            this.onStartTimeChange(this.startTime);
            this.onEndTimeChange(this.endTime);
        },
        data() {
            return {
                startTime: '',
                endTime: '',
                startTimeOption: {},
                endTimeOption: {},
                myStep:'1',
                name:'确认计划',
                myPlanList: null,
                id:'',
                visible_cancel:false,
                cancelSelected:'',
                cancelList:[
                    {
                        value: '1',
                        name: '部令取消'
                    },
                    {
                        value: '2',
                        name: '路局令取消'
                    },
                    {
                        value: '3',
                        name: '行调取消'
                    },
                    {
                        value: '4',
                        name: '车站取消'
                    },
                    {
                        value: '5',
                        name: '自然灾害取消'
                    },
                    {
                        value: '6',
                        name: '自停取消'
                    },
                    {
                        value: '7',
                        name: '其他取消'
                    },
                ],
                couponSelected: '',
                tabKey:this.$route.params.key,
            }
        },
        methods: {
            /**
             * 开始时间发生变化时触发,设置结束时间不可选择的日期
             * 结束时间应大于等于开始时间,且小于等于当前时间
             * @param {string} startTime 格式化后的日期
             * @param {string} type 当前的日期类型
             */
            onStartTimeChange(startTime, type) {
                this.endTimeOption = {
                    disabledDate(endTime) {
                        return endTime < new Date(startTime) || endTime > Date.now()
                    }
                }
            },
            /**
             * 结束时间发生变化时触发,设置开始时间不可选择的日期
             * 开始时间小于等于结束时间,且小于等于当前时间
             * @param {string} date 格式化后的日期
             * @param {string} type 当前的日期类型
             */
            onEndTimeChange(endTime, type) {
                this.startTimeOption = {
                    disabledDate(startTime) {
                        return startTime > new Date(endTime) || startTime > Date.now()
                    }
                }
            },
            onScroll(){
                this.handleScroll;
            },
            showModal_cancel(){
                this.visible_cancel = true
            },
            handleOk_cancel(e) {
                this.visible_cancel = false;
                this.cancel();
            },
            getPlanById(){
                let that = this;
                if(typeof(that.$route.params.id)==="undefined"||that.$route.params.id===""){
                    that.id = localStorage.getItem("planId");
                }else{
                    that.id = that.$route.params.id;
                    localStorage.setItem("planId",that.$route.params.id);
                }
                this.$api.getPlanById(that.id).then(function(resp){
                    //状态码200
                    if(resp.status === 200){
                        //let otherFailSendInfo = failSendInfo.filter(item=>item.UserId!==UserId);//其余的失败信息集合*/
                        that.myPlanList = resp.data.result;//已完成
                        localStorage.setItem("planDetail",JSON.stringify(resp.data.result.planDetail));
                    }
                }).catch(function(error){
                    //请求失败
                    console.log("init plan failed:"+error);

                })

            },
            cancel(){
                let that = this;
                let name = "取消作业";
                let methodName = "确认";
                let note=that.cancelSelected;
                that.$api.step(that.id,name,methodName,note).then(function (resp) {
                    if(resp.status === 200){
                        //let otherFailSendInfo = failSendInfo.filter(item=>item.UserId!==UserId);//其余的失败信息集合*/
                        that.$alert("取消线路作业成功！");
                        that.$router.push({name:'lineWork'});
                    }
                }).catch((error) =>{
                    that.$alert("取消线路作业失败");
                    console.log(error);
                });
            },
            sendStep(){
                let that = this;
                let methodName = "开始";
                let note = '';
                that.$api.step(that.id,that.name,methodName,note).then((resp)=>{
                    if(resp.status === 200){
                    //let otherFailSendInfo = failSendInfo.filter(item=>item.UserId!==UserId);//其余的失败信息集合*/
                    console.log("计划开始成功");
                    that.$router.push({name: 'lineWorkTakePhoto',params: {step: that.myStep,id:that.id,name:that.name}})
                }
                }).catch((error)=>{
                    that.$alert("计划开始失败");
                    console.log(error);
                })

            },



        },
    }
</script>